<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      title="预览"
      :visible.sync="dialogVisible"
      width="1200px"
    >
      <el-tabs v-model="activeName" v-loading="loading" type="border-card">
        <el-tab-pane
          v-for="(item, index) in data"
          :key="index"
          :label="item.filename"
          :name="item.filename"
        >
          <div class="code y-card">
            <el-link
              v-copy:copy="item.fileContent"
              v-copy:success="copySuccess"
              :underline="false"
              icon="el-icon-document-copy"
              style="float:right;background-color: #dcdfe6;"
              title="复制代码"
            >复制代码</el-link>
            <el-link
              :underline="false"
              icon="el-icon-download"
              style="float:right;margin-right: 5.5rem;background-color: #dcdfe6;"
              title="下载文件"
              @click="handleDownload(item)"
            >下载文件</el-link>
            <highlightjs autodetect :code="item.fileContent" />
          </div>

        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { preview } from '@/api/dev/gen'
import 'highlight.js/styles/dark.css'
export default {
  name: 'GenPreview',
  data() {
    return {
      // 弹窗开关
      dialogVisible: false,
      // 加载开关
      loading: false,
      // 选中下标
      activeName: '',
      // tabs列表
      data: []
    }
  },
  computed: {
    // 页面布局大小
    size() {
      return this.$store.state.app.size
    }
  },
  methods: {
    // 打开预览
    openDialog(e) {
      this.dialogVisible = true
      this.loading = true
      preview(e).then(res => {
        this.data = res.data
        this.activeName = res.data[0].filename
      }).finally(() => {
        this.loading = false
      })
    },
    // 复制成功
    copySuccess() {
      this.$message.success('复制成功')
    },
    // 下载文件
    handleDownload(row) {
      this.$download(row.fileContent, row.filename)
    }
  }
}
</script>

<style scoped lang="scss">

  ::v-deep .el-dialog {
    margin-top: 3rem !important;
    .el-dialog__body {
      max-height: 72vh;
      padding: 10px 20px !important;
    }
    .el-dialog__footer {
      box-shadow: 0 5px 6px 5px rgba(0, 0, 0, 0.2);
    }
  }
  ::v-deep .el-tabs {
    position: relative;
    .el-tabs__header {
      margin: 0 0 5px !important;
    }
    .el-tabs__content {
      padding: 3px 15px;
    }
  }
  ::v-deep .el-link {
    position: absolute;
    right: 30px;
    i {
      font-size: 20px !important;
    }
  }

  .code {
    max-height: 58vh;
    overflow-y: auto;
  }
</style>
